﻿<?php
$tpl['title']="Image Effects | PHP Web Application Services";
include("../../../config.php"); 
include(TPL_DIR.$current_theme."/header.php");
?>
<link href="./css/imgeffects.css" type='text/css' rel="stylesheet"/>
<script src="./js/jquery.form.js"></script>
<script>
$(function() {
    
var bar = $('.upload-bar');
var percent = $('.upload-percent');
var upload_out = $('#upload_out');
   
$('#upload').ajaxForm({
    beforeSend: function() {
        //status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        $('.percent').html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
	complete: function(xmlhttp) {
		var img = eval(xmlhttp.responseText);
		//upload_out.html( xmlhttp.responseText);
		$("#IMG_name").val(img[4]);
		$("#irc_mimg").html("<img src='./uploads/"+ img[4]+ "'  id='irc_mi' width='600' height='350' />");
		
	}
}); 

});

function IMG_effects(ele,effect){
  $(document).ready(function(){
      $.ajax(
      {
        beforeSend:function (XMLHttpRequest){
        // $("#irc_mimg").html( );  
			$("#image_effects ul li").css({'background':"#ffffff"});
        },
        data: {submitForm:'IMG_EFFECTS', IMG_effect: effect, IMG_name : $("#IMG_name").val()} , 
        success:function (data){
			$("#irc_mimg").html(data[0]);
			$(ele).css({'background':"#bbbbbb"});
        }, 
        type:"post", 
		dataType: "json",
        url:"./inc/upload.php"
      }
    );   
    });  
	return false;
}       
</script>
<div id="pageContainer" style="margin-right:20px">

			<h4>تحميل الصورة :</h4>
			<div class="upload-form">
				<form id="upload" action="./inc/upload.php" method="post" enctype="multipart/form-data" >
				<input type="file" name="upl">
				<input type="submit" value="تحميل">
				</form>
				<div class="upload-progress">
					<div class="upload-bar"></div>
					<div class="upload-percent">0%</div>
				</div>
				<div id="upload_out">
					<fieldset dir="rtl">
					<legend>بيانات الصورة</legend>
					<label>الاسم : </label><span> ---- </span>   <br/>
					<label>الأبعاد: </label><span> ---- </span><br/>
					<label>الحجم: </label><span> ---- </span>
					</fieldset>
					
				</div>
			</div>
			<div id='irc_mimg'>
				<img src='./images/no-photo.png'  id='irc_mi' width='600' height='350' />
			</div>	
			<div id="image_effects" >
				<form>
				<input type='hidden' id='IMG_name' value='' />
					<fieldset dir="rtl">
					<legend>التأثيرات</legend>
						<div class='effects-list'>
							<span onclick="javascript:return IMG_effects(this,1);">
							<img src='./images/effects/01.jpg'  id='irc_mi' />
							</span>
							<span onclick="javascript:return IMG_effects(this,2);">
							<img src='./images/effects/02.jpg'  id='irc_mi' /></span>
							<span onclick="javascript:return IMG_effects(this,3);">
							<img src='./images/effects/03.jpg'  id='irc_mi' /></span>
							<span onclick="javascript:return IMG_effects(this,4);">
							<img src='./images/effects/04.jpg'  id='irc_mi' /></span>
							<span onclick="javascript:return IMG_effects(this,5);">
							<img src='./images/effects/05.jpg'  id='irc_mi' /></span>
							<span onclick="javascript:return IMG_effects(this,6);">
							<img src='./images/effects/06.jpg'  id='irc_mi' /></span>
						    <span onclick="javascript:return IMG_effects(this,7);">
							<img src='./images/effects/07.jpg'  id='irc_mi' /></span>
							<span onclick="javascript:return IMG_effects(this,8);">
							<img src='./images/effects/08.jpg'  id='irc_mi' /></span>
							<span onclick="javascript:return IMG_effects(this,9);">
							<img src='./images/effects/09.jpg'  id='irc_mi' /></span>
							<span onclick="javascript:return IMG_effects(this,10);">
							<img src='./images/effects/10.jpg'  id='irc_mi' /></span>
							<span onclick="javascript:return IMG_effects(this,11);">
						    <img src='./images/effects/11.jpg'  id='irc_mi' /></span>
							<span onclick="javascript:return IMG_effects(this,12);">
							<img src='./images/effects/12.jpg'  id='irc_mi' /></span>
							<span onclick="javascript:return IMG_effects(this,13);">
							<img src='./images/effects/13.jpg'  id='irc_mi' /></span>
							<span onclick="javascript:return IMG_effects(this,14);">
							<img src='./images/effects/14.jpg'  id='irc_mi' /></span>
						</div>
						</fieldset>
					</form>
				</div>
  		 	<div style="clear:both"></div>
</div>	
	
<?php include(TPL_DIR.$current_theme."/footer.php"); ?>	